<!--
 * @Author: hifishroom
 * @Date: 2021-09-27 20:05:42
 * @LastEditTime: 2022-04-07 21:41:21
 * @FilePath: \website\src\components\content\header\Header.vue
-->
<template>
  <header class="index-header flex">
    <div class="header-container flex">
      <div class="logo flex flex-center">
        <span class="h_nv_logo">hifishroom</span>
        <span class="h-nav-left">分享每一天快乐~</span>
      </div>
      <div class="head-nav">
        <router-link to="/">首页</router-link>
        <router-link to="/share">分享</router-link>
        <router-link to="/about">关于</router-link>
      </div>
    </div>
  </header>
</template>

<script>
import { ref, defineComponent } from "vue";
export default defineComponent({
  name: "Header",
  props: ["opacity"],
  setup(props) {
    let currentIndex = ref(0);
    console.log(props.opacity);
    function navClick(index) {
      currentIndex.value = index;
    }
    return {
      currentIndex,

      navClick,
    };
  },
});
</script>
